<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2020/5/21
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<html>
<head>
    <title>仓库</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="仓库">
                        <i-select v-model="storeOperVo.storeId" style="width: 110px">
                            <i-option value="">【不限】</i-option>
                            <i-Option v-for="item in storeList" :value="item.id" :key="item.id">{{item.sname}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="商品">
                        <i-select v-model="storeOperVo.goodId" style="width: 110px">
                            <i-option value="">【不限】</i-option>
                            <i-Option v-for="item in goodsList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                        </i-select>
                    </form-item>

                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>
    <i-table :columns="columns" :data="pageResult.rows" :height="400" border stripe><%--只要选中现发生变化时就会触发，返回值为selection，已选项--%>
        <template slot-scope="{row}" slot="sname">
            <span>{{row.store.sname}}</span>
        </template>
        <template slot-scope="{row}" slot="name">
            <span>{{row.goods.name}}</span>
        </template>
    </i-table>
    <Page :total="pageResult.total"
          :page-size="pageSize"<%--每页条数--%>
    <%--:current.sync="pageNo"    =pageNo=arguments[0];searchUserList();当前页码，支持.sync修饰符,同步
    @on-change="searchUserList"返回改变后的页码,这两行代码相当于下面一行代码--%>
          @on-change="pageNo=arguments[0];search();"
    <%-- @on-change="searchUserList"--%>
          show-sizer<%--是否显示分页，用来改变page-size--%>
          :page-size-opts="[5,10,15]"<%--每页条数切换的配置--%>
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];search();"<%--切换每页数时的回调，返回切换后的每页条数--%>
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                // {type:"selection",width:60,align:"center"},
                {title:"编号",key: "id"},
                {title:"仓库名称",slot: "sname"},
                // {title:"商品",key: "goodId"},
                {title:"商品名称",slot:"name"},
                {title:"数量",key:"number"},
                // {title:"操作",slot:"action"}

            ],
            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:5,
            storeList:[],
            goodsList:[],
            storeOperVo:{},
        },
        mounted(){
            this.search();
            this.searchStoreList();
            this.searchGoodsList();
        },
        methods:{
                search(){
                    axios.get(`${ctx}/kucun/store/list/${this.pageNo}/${this.pageSize}`,{params:this.storeOperVo})
                        .then(({data})=>{
                            this.pageResult=data.result;

                        });
                },
            searchStoreList(){
                axios.get(`${ctx}/kucun/store/list`)
                    .then(({data})=>{
                        this.storeList=data.result;
                    });
            },
            searchGoodsList(){
                axios.get(`${ctx}/sys/goods/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
        }
    })
</script>
</body>
</html>
